<template>
	<w-dailog v-model="dialogVisible" :title="`${dialogTitle}类型`" width="500px">
		<div class="create-area">
			<el-form ref="form" :model="formData" :rules="rules" size="mini" inline>
				<el-form-item label="所属大类：" label-width="140px" v-if="isShowParent">
					<el-select
						v-model="formData.parentId"
						filterable placeholder="请选择"
						class="form-item-input"
					>
						<el-option
							v-for="item in bigTypeList"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="name" label="类别名称：" label-width="140px">
					<w-input
						v-model="formData.name"
						:maxlength="$fxCommon.getFxInputMaxLength('commonName')"
						:regType="$fxCommon.getFxInputReg('commonName')"
						class="form-item-input"
					></w-input>
				</el-form-item>
			</el-form>
		</div>
		<template slot="footer">
			<el-button @click="onCancelClick">取消</el-button>
			<el-button type="primary" @click="onSaveClick">保存</el-button>
		</template>
	</w-dailog>
</template>
<script>
export default {
	name: 'createItem',
	data () {
		return {
			dialogVisible: false,
			actionType: '',
			formData: {
				fatherId: '',
				name: ''
			},
			rules: {
				name: [{ required: true, message: '该字段不能为空', trigger: 'change' }]
			},
			bigTypeList: []
		}
	},
	computed: {
		dialogTitle () {
			return this.actionType === 'add' ? '新建' : '编辑'
		},
		isShowParent () {
			return (this.actionType === 'add' && this.formData.type === 0) || (this.actionType === 'edit' && this.formData.type === 1)
		}
	},
	methods: {
		add (treeNode) {
			this.actionType = 'add'
			// 新建大类
			if (treeNode.id === '2') {
				this.refreshFormData(treeNode)
				this.clearValidate()
			} else { // 新建小类
				this.getitemTypeList().then(() => {
					this.refreshFormData(treeNode)
				}).then(() => {
					this.clearValidate()
				})
			}
		},
		refreshFormData (data) {
			this.formData = {
				parentId: data.id,
				name: '',
				type: data.type
			}
		},
		edit (details) {
			this.actionType = 'edit'
			// 编辑大类
			if (details.id === '2' || details.type === 0) {
				this.formData = {
					parentId: details.pid,
					id: details.id,
					type: 0,
					name: details.name
				}
				this.clearValidate()
			} else { // 编辑小类
				this.getitemTypeList().then(() => {
					this.formData = {
						parentId: details.pid,
						id: details.id,
						type: 1,
						name: details.name
					}
				}).then(() => {
					this.clearValidate()
				})
			}
		},
		clearValidate () {
			if (this.$refs.form) {
				this.$refs.form.clearValidate()
			}
			this.dialogVisible = true
		},
		onSaveClick () {
			this.onValidateFormData().then(this.onSaveHandler).then(() => {
				this.dialogVisible = false
				this.$emit('on-refresh')
			})
		},
		onSaveAndAddClick () {
			this.onValidateFormData().then(this.onSaveHandler).then(() => {
				this.$emit('on-refresh')
				this.add()
			})
		},
		onValidateFormData () {
			return this.$refs.form.validate().then(() => {
				return Promise.resolve()
			})
		},
		onSaveHandler () {
			return this.$fxApi('procedure.procedureTypeSaveOrUpdate')({ data: this.formData }).then(res => {
				return Promise.resolve()
			})
		},
		onCancelClick () {
			this.dialogVisible = false
		},
		getitemTypeList () {
			return this.$fxApi('procedure.findListTypeAll')({
				query: {
					type: 0
				}
			}).then(res => {
				this.bigTypeList = res
				return Promise.resolve(res)
			})
		},
		getFather (id) {
			if (!id) {
				return ''
			}
			return this.itemTypeList.find(item => {
				return item.id === id
			}) || {}
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.create-area {
	width: 100%
	height: 100px
	box-sizing: border-box
	.form-item {
		margin: 25px 0
	}
	.form-item-input {
		width:280px
	}
}
</style>
